<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div1{
            background: red;
            /*border: 1px solid black;*/
        }
        #div2{
            height: 50px;
            background: green;
            color: #fff;
            margin:  100px 100px 200px 100px;
        }
        #div3{
            height: 50px;
            background: blue;
            color: #fff;
            margin: 100px ≈;
        }
        #div4{
            height: 100px;
            background: yellow;
        }
    </style>
</head>
<body>
    <!--
            margin的问题


            1、margin传递的问题（只有上下会传递,左右不会传递）
                子集会把子集的margin-top、margin-bottom传递给父级。
                解决办法：给父级加边框(其中一个方法)
            2、margin上下叠压的问题（只有上下会叠压，左右不会叠压）
                上边元素的margin-bottom与下边元素的margin-top会叠压在一起，会取大的值
                解决办法：只用给一个元素设置margin。
    -->
    <div id="div1">
        <div id="div2">box2</div>
        <div id="div3">box3</div>
    </div>
    <!--<div id="div4">div4</div>-->
</body>
</html>